<!--菜单4：
电表实时监控菜单中的
有功功率
图表-->
<template>
  <div class="sDLQS_chart">
    <div class="grid-content bg-purple sMonitoringBranch_left sleft-top">
      <div class="selectric_monitor_title">
        <span>汝阳市人民医院仪表实时监测图</span>
      </div>
      <div class = "sMonitoringBranch_content">
        <!--                        数据展示-->
        <table border="1px" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td >功率编号</td>
            <td v-text="S_YGGL__chart_tableData[0].id"></td>
            <td >功率名称</td>
            <td v-text="S_YGGL__chart_tableData[0].name"></td>
          </tr>
          <tr>
            <td >安装位置</td>
            <td v-text="S_YGGL__chart_tableData[0].location"></td>
            <td >功率参数[Kwh]</td>
            <td v-text="S_YGGL__chart_tableData[0].data"></td>
          </tr>
          <tr>
            <td >每日功率[Kwh]</td>
            <td v-text="S_YGGL__chart_tableData[0].day_ele"></td>
            <td >每月功率[Kwh]</td>
            <td v-text="S_YGGL__chart_tableData[0].month_ele"></td>
          </tr>
          <tr>
            <td >每年功率[Kwh]</td>
            <td v-text="S_YGGL__chart_tableData[0].year_ele"></td>
            <td >通讯时间</td>
            <td v-text="S_YGGL__chart_tableData[0].time"></td>
          </tr>
        </table>
      </div>
    </div >
    <!--                折线图展示区域-->
    <div class="sleft-bottom">
      有功功率趋势图像
    </div>
  </div>
</template>

<script>
export default {
  name: "chart",
  data(){
    return{
      S_YGGL__chart_tableData:[]
    }
  },
  mounted(){
    this.initYGGL_chart();
  },
  methods: {
    initYGGL_chart(){
      this.axios.get('/api/module4/YGGL_chart').then(resp=>{
        this.S_YGGL__chart_tableData=resp.data.list;
      })
    }
  }
}
</script>

<style scoped>
.sDLQS_chart{
  width: 100%;
  height: 100%;
}
.selectric_monitor_title{
  border: 1px solid #999999;
  display: flex;
  border-radius: 3px;
  justify-content: center;
  color: #25A0D9;
  height: 20px;
}
.sleft-top{
  width: 100%;
  height: 15%!important;
}
.sleft-bottom{
  width: 100%;
  height: 84%!important;
  border: 1px solid red;
}
</style>
<style>
.sMonitoringBranch_content{
  height: 75%;
}
</style>
